<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery thumbnail scroller</title>
<style type="text/css">
<!--
body {margin:0; padding:0; background:#666;}
a{ color:#FFCC00;}
#outer_container{margin:60px auto; width:600px; padding:0 10px; background:#000; border:1px solid #999;}
#thumbScroller{position:relative; margin:auto;}
#thumbScroller{width:600px;}
#thumbScroller, #thumbScroller .container, #thumbScroller .content{height:170px;}
#thumbScroller{overflow:hidden;}
#thumbScroller .container{position:relative; left:0;}
#thumbScroller .content{width:260px; float:left;}
#thumbScroller .content div{padding:10px 15px; height:100%; font-family:Verdana, Geneva, sans-serif; font-size:13px;}
#thumbScroller img{border:5px solid #fff;}
-->
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
</head>

<body>
<div id="outer_container">
<div id="thumbScroller">
	<div class="container">
    	<div class="content">
        	<div><a href="#"><img src="thumbs/thumb1.jpg" title="The path" alt="The path" class="thumb" /></a></div>
        </div>
        <div class="content">
        	<div><a href="#"><img src="thumbs/thumb2.jpg" title="A flower" alt="A flower" class="thumb" /></a></div>
        </div>
        <div class="content">
        	<div><a href="#"><img src="thumbs/thumb3.jpg" title="Dusk" alt="Dusk" class="thumb" /></a></div>
        </div>
        <div class="content">
        	<div><a href="#"><img src="thumbs/thumb4.jpg" title="A waterfall" alt="A waterfall" class="thumb" /></a></div>
        </div>
        <div class="content">
        	<div><a href="#"><img src="thumbs/thumb5.jpg" title="The canyon" alt="The canyon" class="thumb" /></a></div>
        </div>
        <div class="content">
        	<div><a href="#"><img src="thumbs/thumb6.jpg" title="The road" alt="The road" class="thumb" /></a></div>
        </div>
        <div class="content">
        	<div><a href="#"><img src="thumbs/thumb7.jpg" title="A forest" alt="A forest" class="thumb" /></a></div>
        </div>
        <div class="content">
        	<div><a href="#"><img src="thumbs/thumb8.jpg" title="A house" alt="A house" class="thumb" /></a></div>
        </div>
        <div class="content">
        	<div><a href="#"><img src="thumbs/thumb9.jpg" title="Paradise" alt="Paradise" class="thumb" /></a></div>
        </div>
        <div class="content">
        	<div><a href="#"><img src="thumbs/thumb10.jpg" title="Trees" alt="Trees" class="thumb" /></a></div>
        </div>
        <div class="content">
        	<div><a href="#"><img src="thumbs/thumb11.jpg" title="Plant leaves" alt="Plant leaves" class="thumb" /></a></div>
        </div>
	</div>
</div>
</div>More script and css style
: <a href="http://www.htmldrive.net/" title="HTML DRIVE - Free DHMTL Scripts,Jquery plugins,Javascript,CSS,CSS3,Html5 Library">www.htmldrive.net </a>

<script>
	$outer_container=$("#outer_container");
	$thumbScroller=$("#thumbScroller");
	$thumbScroller_container=$("#thumbScroller .container");
	$thumbScroller_content=$("#thumbScroller .content");
	$thumbScroller_thumb=$("#thumbScroller .thumb");

	var sliderWidth=$thumbScroller.width();
	var itemWidth=$thumbScroller_content.width();

	$thumbScroller_content.each(function (i) {
		totalContent=i*itemWidth;	
		$thumbScroller_container.css("width",totalContent+itemWidth);
	});

	$thumbScroller.mousemove(function(e){
		var mouseCoords=(e.pageX - this.offsetLeft);
	  	var mousePercentY=mouseCoords/sliderWidth;
	  	var destY=-(((totalContent-(sliderWidth-itemWidth))-sliderWidth)*(mousePercentY));
	  	var thePosA=mouseCoords-destY;
	  	var thePosB=destY-mouseCoords;
	  	if(mouseCoords==destY){
			$thumbScroller_container.stop();
	  	}
	  	if(mouseCoords>destY){
			$thumbScroller_container.css("left",-thePosA);
	  	}
	  	if(mouseCoords<destY){
			$thumbScroller_container.css("left",thePosB);
	  	}
	});

	var fadeSpeed=300;
	
	$thumbScroller_thumb.each(function () {
		var $this=$(this);
		$this.fadeTo(fadeSpeed, 0.5);
	});

	$thumbScroller_thumb.hover(
		function(){ //mouse over
			var $this=$(this);
			$this.stop().fadeTo(fadeSpeed, 1);
		},
		function(){ //mouse out
			var $this=$(this);
			$this.stop().fadeTo(fadeSpeed, 0.5);
		}
	);
</script>
</body>
</html>
